import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { DNavBar, DImagesupload, DAgree } from '@/components'
import { AtButton } from 'taro-ui'
import http from '@/api'
import { connect } from '@tarojs/redux'
import './advanceupload.scss'

const peopleRight = require('../assets/people_right.png')
const peopleLeft = require('../assets/people_info.png')

@connect(({ counter }) => ({
  counter
}), (getState) => ({
  addForm() {
    getState(getadvanceinfo())
  }
}))
export default class AdvanceuploadBox extends Component {
  constructor(props) {
    super(props)
    this.state = {
      appApplyVO: {
        amSaleId: '1',
        applyFiles: []
      },
      advanceform: {},
      typeForm: '',
      agreeStatus: false,
      img1: [], // 身份证正面
      img2: [], // 身份证反面
      img3: [], // 采购合同
      img4: [], // 订金合同
      img5: [], // 同贷信息
      img6: [], // 审核表
      img7: [], // 确认书
      img8: [], // 付款路径图
      img9: [], // 其他
      edit: ''
    }
  }

  bindCarform(key, value) {
    if (key) {
      let { advanceform } = this.state
      advanceform[key] = value
      this.setState({
        advanceform
      })
    }
  }

  componentWillMount() {
    let { type = '', edit, id } = this.$router.params
    let _advaceform = sessionStorage.getItem('advaceform')

    if (!_advaceform) {
      return
    }
    let _obj = JSON.parse(_advaceform)

    if (edit !== 'undefined') {
      this.setState({ edit: true })
      this.getImgs(id)
    }

    this.setState({
      appApplyVO: {
        ...this.state.appApplyVO,
        ..._obj
      },
      typeForm: type
    }, () => {
      sessionStorage.removeItem('advaceform')
    })
  }
  getImgs(id) {
    http.advanceMoneyApplyPC(id).then(({ applyFiles }) => {
      let {
        img1,
        img2,
        img3,
        img4,
        img5,
        img6,
        img7,
        img8,
        img9,
        advanceform
      } = this.state

      applyFiles.forEach(item => {
        switch (item.afFileType) {
          case '1':
            if (item.afFileName == '国徽面') {
              img2.push({
                afFileType: item.afFileType,
                url: item.afUrl,
                afUrl: item.afUrl,
                afFileId: item.afFileId,
                afFileName: item.afFileName
              })
            } else if (item.afFileName == '人像面') {
              img1.push({
                afFileType: item.afFileType,
                url: item.afUrl,
                afUrl: item.afUrl,
                afFileId: item.afFileId,
                afFileName: item.afFileName
              })
            }
            break;
          case '2':
            img3.push({
              afFileType: item.afFileType,
              url: item.afUrl,
              afUrl: item.afUrl,
              afFileId: item.afFileId,
              afFileName: item.afFileName
            })
            break;
          case '6':
            img4.push({
              afFileType: item.afFileType,
              url: item.afUrl,
              afUrl: item.afUrl,
              afFileId: item.afFileId,
              afFileName: item.afFileName
            })
            break;
          case '7':
            img5.push({
              afFileType: item.afFileType,
              url: item.afUrl,
              afUrl: item.afUrl,
              afFileId: item.afFileId,
              afFileName: item.afFileName
            })
            break;
          case '8':
            img6.push({
              afFileType: item.afFileType,
              url: item.afUrl,
              afUrl: item.afUrl,
              afFileId: item.afFileId,
              afFileName: item.afFileName
            })
            break;
          case '9':
            img7.push({
              afFileType: item.afFileType,
              url: item.afUrl,
              afUrl: item.afUrl,
              afFileId: item.afFileId,
              afFileName: item.afFileName
            })
            break;
          case '11':
            img8.push({
              afFileType: item.afFileType,
              url: item.afUrl,
              afUrl: item.afUrl,
              afFileId: item.afFileId,
              afFileName: item.afFileName
            })
            break;
          case '12':
            img9.push({
              afFileType: item.afFileType,
              url: item.afUrl,
              afUrl: item.afUrl,
              afFileId: item.afFileId,
              afFileName: item.afFileName
            })
            break;
        }
      })
      let _appApplyVO = {
        'carRightImage': img1,
        'carLeftImage': img2,
        'buyCar': img3,
        'subContract': img4,
        'creditInfo': img5,
        'applyTable': img6,
        'confirmBook': img7,
        'roadMap': img8,
        'other': img9,
      }
      Object.keys(_appApplyVO).forEach(key => {
        advanceform[key] = _appApplyVO[key]
      })
      this.setState({
        img1,
        img2,
        img3,
        img4,
        img5,
        img6,
        img7,
        img8,
        img9,
      })
    })
  }

  onSubmit() {
    let { appApplyVO, advanceform, agreeStatus, edit } = this.state

    // 校验规则
    let _appApplyVO = [
      'carRightImage',
      'carLeftImage',
      'buyCar',
      'subContract',
      'creditInfo',
      'applyTable',
      'confirmBook',
      'roadMap',
    ]
    let status = false, _item = '',
      objtext = {
        carRightImage: '请上传车主身份证人像面',
        carLeftImage: '请上传车主身份证国徽面',
        buyCar: '请上传采购合同',
        subContract: '请上传订金合同',
        creditInfo: '请上传同贷信息',
        applyTable: '请上传审核表',
        confirmBook: '请上传确认书',
        roadMap: '请上传付款路径图'
      }
    appApplyVO.applyFiles = []

    for (let i = 0, j = _appApplyVO.length; i < j; i++) {
      if (!advanceform[_appApplyVO[i]]) {
        status = true
        _item = objtext[_appApplyVO[i]]
        break
      } else if (advanceform[_appApplyVO[i]] && advanceform[_appApplyVO[i]].length === 0) {
        status = true
        _item = objtext[_appApplyVO[i]]
        break
      } else if (advanceform[_appApplyVO[i]] && advanceform[_appApplyVO[i]].length > 0) {
        appApplyVO.applyFiles.push(...advanceform[_appApplyVO[i]])
      }
    }
    if (advanceform['nostarImage'] && advanceform['nostarImage'].length > 0) {
      appApplyVO.applyFiles.push(...advanceform['nostarImage'])
    }
    if (advanceform['other'] && advanceform['other'].length > 0) {
      appApplyVO.applyFiles.push(...advanceform['other'])
    }
    if (status) {
      return Taro.showToast({
        title: _item,
        icon: 'none'
      })
    }
    if (!agreeStatus) {
      return Taro.showToast({
        icon: 'none',
        title: '请阅读并同意《车辆代购助购服务协议》'
      })
    }
    if (edit) {
      appApplyVO.id = this.$router.params.id
    }
    http.addAdvanceMoney(appApplyVO).then(() => {
      Taro.showToast({
        title: '已提交代购申请',
        duration: 800,
        mask: true
      }).then(() => {
        setTimeout(() => {
          Taro.redirectTo({
            url: `/pages/advanceorderList?active=${0}`
          })
        }, 1000)
      })
    })
  }

  onHandleImage = (status = '') => {
    Taro.navigateTo({
      url: `/pages/itemImages/itemImages?status=${status}`
    })
  }

  getType(bind) {
    return {
      $carRightImage: '1',
      $carLeftImage: '1',
      $buyCar: '2',
      // $fileImage: '4',
      // $moneyPayImage: '3',
      // $nostarImage: '5',
      $subContract: '6', // 订金合同
      $creditInfo: '7', // 同贷信息
      $applyTable: '8', // 审核表
      $confirmBook: '9', // 确认书
      $roadMap: '11', // 付款路径图
      $other: '12', // 其他
    }[`$${bind}`]
  }

  onHandleAgreeStatus(value) {
    this.setState({
      agreeStatus: value
    })
  }
  filterFileName(key) {
    return {
      'carLeftImage': '国徽面',
      'carRightImage': '人像面'
    }[key]
  }

  render() {
    const {
      agreeStatus,
      img1,
      img2,
      img3,
      img4,
      img5,
      img6,
      img7,
      img8,
      img9,
      edit
    } = this.state

    const _imageList = function (key, value) {
      let _value = []
      value.map((item) => {
        _value.push({
          afFileType: this.getType(key),
          afUrl: item.url,
          afFileId: item.id,
          afFileName: this.filterFileName(key)
        })
      })
      this.bindCarform(key, _value)
    }

    const itemImagesHtml1 =
      <View className='b_advanceupload__images_enterpris'>
        <View className='item_title'>
          <Text className='item_title__left'>车主身份证</Text>
          {/* <Text className='item_title__right' onClick={this.onHandleImage.bind(this)}>查看范例</Text> */}
        </View>
        <View className="item_images__box">
          {
            edit && img1.length && <DImagesupload bind='carRightImage' value={img1} onChangeImages={_imageList.bind(this, 'carRightImage')} className='item_images__box_item' count={1} bgImage={peopleRight} text={'上传人像面'}></DImagesupload>
          }
          {
            !edit && <DImagesupload bind='carRightImage' onChangeImages={_imageList.bind(this, 'carRightImage')} className='item_images__box_item' count={1} bgImage={peopleRight} text={'上传人像面'}></DImagesupload>
          }
          {
            edit && img2.length && <DImagesupload bind='carLeftImage' value={img2} onChangeImages={_imageList.bind(this, 'carLeftImage')} count={1} bgImage={peopleLeft} text={'上传国徽面'}></DImagesupload>
          }
          {
            !edit && <DImagesupload bind='carLeftImage' onChangeImages={_imageList.bind(this, 'carLeftImage')} count={1} bgImage={peopleLeft} text={'上传国徽面'}></DImagesupload>
          }
        </View>
      </View>
    const itemImagesHtml2 =
      <View className='b_advanceupload__images_enterpris'>
        <View className='item_title'>
          <Text className='item_title__left'>采购合同</Text>
          {/* <Text className='item_title__right' onClick={this.onHandleImage.bind(this, 'carrunword')}>查看范例</Text> */}
        </View>
        {
          edit && img3.length && <DImagesupload value={img3} bind='buyCar' count={1} onChangeImages={_imageList.bind(this, 'buyCar')} ></DImagesupload>
        }
        {
          !edit && <DImagesupload bind='buyCar' count={1} onChangeImages={_imageList.bind(this, 'buyCar')} ></DImagesupload>
        }
      </View>
    const itemImagesHtml6 =
      <View className='b_advanceupload__images_enterpris'>
        <View className='item_title'>
          <Text className='item_title__left'>订金合同</Text>
        </View>
        {
          edit && img4.length && <DImagesupload value={img4} bind='subContract' count={1} onChangeImages={_imageList.bind(this, 'subContract')} ></DImagesupload>
        }
        {
          !edit && <DImagesupload bind='subContract' count={1} onChangeImages={_imageList.bind(this, 'subContract')} ></DImagesupload>
        }
      </View>
    const itemImagesHtml7 =
      <View className='b_advanceupload__images_enterpris'>
        <View className='item_title'>
          <Text className='item_title__left'>同贷信息</Text>
        </View>
        {
          edit && img5.length && <DImagesupload value={img5} bind='creditInfo' count={1} onChangeImages={_imageList.bind(this, 'creditInfo')} ></DImagesupload>
        }
        {
          !edit && <DImagesupload bind='creditInfo' count={1} onChangeImages={_imageList.bind(this, 'creditInfo')} ></DImagesupload>

        }
      </View>
    const itemImagesHtml8 =
      <View className='b_advanceupload__images_enterpris'>
        <View className='item_title'>
          <Text className='item_title__left'>审核表</Text>
        </View>
        {
          edit && img6.length && <DImagesupload bind='applyTable' value={img6} count={1} onChangeImages={_imageList.bind(this, 'applyTable')} ></DImagesupload>
        }
        {
          !edit && <DImagesupload bind='applyTable' count={1} onChangeImages={_imageList.bind(this, 'applyTable')} ></DImagesupload>
        }

      </View>
    const itemImagesHtml9 =
      <View className='b_advanceupload__images_enterpris'>
        <View className='item_title'>
          <Text className='item_title__left'>确认书</Text>
        </View>
        {
          edit && img7.length && <DImagesupload value={img7} bind='confirmBook' count={1} onChangeImages={_imageList.bind(this, 'confirmBook')} ></DImagesupload>
        }
        {
          !edit && <DImagesupload bind='confirmBook' count={1} onChangeImages={_imageList.bind(this, 'confirmBook')}></DImagesupload>
        }
      </View>
    const itemImagesHtml10 =
      <View className='b_advanceupload__images_enterpris'>
        <View className='item_title'>
          <Text className='item_title__left'>付款路径图</Text>
        </View>
        {
          edit && img8.length && <DImagesupload value={img8} bind='roadMap' count={1} onChangeImages={_imageList.bind(this, 'roadMap')} ></DImagesupload>
        }
        {
          !edit && <DImagesupload bind='roadMap' count={1} onChangeImages={_imageList.bind(this, 'roadMap')} ></DImagesupload>
        }
      </View>
    const itemImagesHtml11 =
      <View className='b_advanceupload__images_enterpris'>
        <View className='item_title'>
          <Text className='item_title__left no-required'>其他</Text>
        </View>
        {
          edit && img8.length && <DImagesupload value={img9} bind='other' count={5} onChangeImages={_imageList.bind(this, 'other')} ></DImagesupload>
        }
        {
          !edit && <DImagesupload bind='other' count={5} onChangeImages={_imageList.bind(this, 'other')} ></DImagesupload>
        }
      </View>
    return (
      <View className='b_advanceupload'>
        <DNavBar title='上传图片'></DNavBar>
        <View className='b_advanceupload__box'>
          <View className='b_advanceupload__images'>
            <View className='b_advanceupload__images_title'>请上传以下资料</View>
            {/* {itemPeople} */}
            <View className="b_advanceupload__images_item">
              {itemImagesHtml1}
            </View>
            <View className="b_advanceupload__images_item">
              {itemImagesHtml2}
            </View>
            <View className="b_advanceupload__images_item">
              {itemImagesHtml6}
            </View>
            <View className="b_advanceupload__images_item">
              {itemImagesHtml7}
            </View>
            <View className="b_advanceupload__images_item">
              {itemImagesHtml8}
            </View>
            <View className="b_advanceupload__images_item">
              {itemImagesHtml9}
            </View>
            <View className="b_advanceupload__images_item">
              {itemImagesHtml10}
            </View>
            <View className="b_advanceupload__images_item">
              {itemImagesHtml11}
            </View>
          </View>
          <View className='b_advanceupload__footer'>
            <DAgree value={agreeStatus} type='5' text='车辆代购助购服务协议' onHandleChange={this.onHandleAgreeStatus.bind(this)}></DAgree>
            <AtButton className='item_btn' onClick={this.onSubmit.bind(this)}>确认上传</AtButton>
          </View>
        </View>
      </View>
    )
  }
}
